<template>
	<view class="abnormal-details-wrap">
		<!-- 头部 -->
		<view class="header">
			<uni-nav-bar 
			:status-bar="true" 
			fixed 
			:title="title" 
			leftIcon="back" 
			rightText="提交" 
			@clickLeft="clickLeft"
			@clickRight="clickRight"
			>
			</uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 头部标签 -->
			<view class="content-header">
				<view class="abnormal-card">
					<view class="content-ul">
						<view class="content-li">
							<view class="title">所属食堂</view>
							<view class="content">{{abnormalInfoObj.departmentName || '--'}}</view>
						</view>
						<view class="content-li">
							<view class="title">推送时间</view>
							<view class="content">{{abnormalInfoObj.occurrenceTime || '--'}}</view>
						</view>
						<view class="content-li" v-if="abnormalInfoObj.content">
							<view class="content">{{abnormalInfoObj.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 处置 / 处置详情 -->
			<view class="dispose-container">
				 <!-- 1.处置详情 -->
				 <view class="dispose-details-container" v-if="exceptionInfo.explanation || exceptionInfo.fileList > 0">
					 <view>处置信息：</view>
					  <!-- 1.处置详情 -->
					  <view class="dispose-details-wrap" v-if="abnormalInfoObj.status === '02'">
						<view class="dispose-content-text">
						  <text>{{exceptionInfo.explanation}}</text>
						</view>
						<view class="dispose-content-img">
						  <view class="dispose-content-img-ul">
							<view v-for="(item, index) in exceptionInfo.fileList" :key="index">
							  <image :src="imgHeaderUrl + item" />
							</view>
						  </view>
						</view>
					 </view>
				 </view>
				 <!-- 2.处置 -->
				 <view class="dispose-wrap" v-if="abnormalInfoObj.status === '01'">
					 <view class="dispose-content">
					 	<view class="dispose-content-text">
					 		<textarea
								class="custom-textarea-box"
								placeholder-style="color:#F76260" 
								placeholder="请输入处置信息..." 
								maxlength="300"
								@blur="bindTextAreaBlur"
								/>
					 	</view>
						<!-- 图片 -->
						<view class="upload-image-wrap">
							<custom-upload-image 
								:mode="mode" 
								:maxCount="maxCount" 
								:imgs="imgs"
								@chooseUpload="openActionSheet"
								>
							</custom-upload-image>
						</view>
						<!-- 选择上传方式 -->
						<view class="choose-upload">
							<min-action-sheet ref="actionSheet"></min-action-sheet>
						</view>
					 </view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet.vue'
	import customUploadImage from '@/components/custom-upload-image/custom-upload-image.vue'
	import {upload} from '@/http/fileServer.js'
	export default {
		components: {minActionSheet, customUploadImage},
		data() {
			return {
				title: '',
				exceptionId: '',
				detailsName: {
					'01': '证件异常详情',
					'02': '设备异常详情',
					'03': '人员异常详情',
					'04': '食品异常详情'
				},
				abnormalInfoObj: {},
				exceptionInfo: {},
				mode: '',
				maxCount: 9,
				uploadMax: 5,
				imgs: [],
				uploadImages: [],
				content: ''
				
			}
		},
		onLoad(option) {
			console.log('abnormalDetails--option', option)
			this.title = this.detailsName[option.anomalousType] || '处置'
			this.exceptionId = option.exceptionId || ''
			this.init()
			console.log('upload', upload)
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			clickRight() {
				if (this.content || this.imgs.length > 0) {
					console.log('提交')
					// 图片上传
					if (this.uploadImages.length > 0) {
						this.uploadImagesFunc()
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请填写处置内容!'
					})
				}
			},
			init () {
				this.getExceptionDetailInfo()
			},
			/**
			 * @description: App获取异常详情
			 * @author: LinW
			 * @createDate: 2019-09-16 15:39
			 * @param: mod
			 * @return:
			 */
			getExceptionDetailInfo() {
			  this.$request.ygstAppExceptionDetailInfoGet(this.exceptionId).then(res => {
				console.log('______app异常详情的获取______::::', res)
				this.abnormalInfoObj = res
				if (this.abnormalInfoObj.status === '02') {
				  this.ygstExceptionInfoGetFunc()
				}
			  })
			},
			/**
			 * @description: 处置详情
			 * @author: linwen linwen@fjxhx.com
			 * @createDate: 2020-05-22 14:54
			 * @param: 处置详情
			 * @return:
			*/
			ygstExceptionInfoGetFunc() {
			  this.$request.ygstExceptionInfoGet(this.abnormalInfoObj.exceptionId).then(res => {
				console.log('_______处置详情的获取res______:::', res)
				this.exceptionInfo = res
			  })
			},
			openActionSheet() {
				this.$refs.actionSheet.handleShow({
					actions: [
						{
							name: '拍照上传'
						},
						{
							name: '从相册选择'
						}
					],
					success: res => {
						switch(res.id) {
							case -1: // -1 代表取消
							break
							case 0: // 拍照上传
							this.mode = 0
							console.log('拍照上传:0', res)
							
							break
							case 1: // 从相册选择
							 console.log('从相册选择:1', res)
							 this.mode = 1
							 uni.chooseImage({
							 	count: this.maxCount,
								sourceType: ['album'],
								success: (res) => {
									console.log('res__________::', JSON.stringify(res));
									for(let i = 0; i< res.tempFiles.length; i++) {
										console.log('#########res.tempFiles########', JSON.stringify(res.tempFiles))
										if(Math.ceil(res.tempFiles[i].size / 1024) < this.uploadMax * 1024) {
											this.imgs.push(res.tempFiles[i].path)
											this.uploadImages.push(res.tempFiles[i].path)
										}
									}
									
								}
							 })
							break
						}
					}
				})
			},
			bindTextAreaBlur(e) {
				this.content = e.detail.value
			},
			/**
			 * 图片上传
			 */
			uploadImagesFunc() {
				for(let i = 0; i < this.uploadImages.length; i++) {
					let fileName = this.uploadImages[i].substring(this.uploadImages[i].lastIndexOf('/')+1)
					upload({
						fileName,
						file: this.uploadImages[i]
					}).then(res => {
						console.log('图片上传---（）（）', res)
					}).catch(e => {
						console.log('uploadImagesFunc eeee', e)
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.abnormal-details-wrap {
		.content {
			.content-header {
				.abnormal-card {
					width: 100%;
					box-sizing: border-box;
					padding: 30rpx 36rpx;
					.content-ul {
						border: 1px solid #EAEAEA;
						border-radius: 10rpx;
						.content-li {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							padding: 20rpx;
						
							.title {
								flex: 0 0 200rpx;
							}
						}
						
						.content-li:nth-last-child(1) {
							border-top: 1px dashed #EAEAEA;
						}
					}
				}
			}
			/*处置/处置信息*/
			.dispose-container {
			  width: 100%;
			  box-sizing: border-box;
			  padding: 20rpx 36rpx;
			  .dispose-details-container {
				  .dispose-details-wrap {
					.dispose-content-text {
					  width: 100%;
					  position: relative;
					  .custom-textarea-box {
						width: 100%;
						height: 30rpx;
						padding: 40rpx 20rpx 20rpx;
						border: none;
						outline: none;
						resize: none;
					  }
					}
					.dispose-content-img {
					  .dispose-content-img-ul {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-flow: row wrap;
						li {
						  padding: 10rpx;
						  width: 50%;
						  height: 30rpx;
						  img {
							width: 100%;
							height: 100%;
							/*object-fit: contain;*/
							background-size: 100% 100%;
						  }
						}
					  }
					}
				 }
			  }
			  .dispose-wrap {
				  .dispose-content {
					  .dispose-content-text {
						  width: 100%;
						  box-sizing: border-box;
						  margin: 20rpx auto;
						  box-shadow: 0px 0px 0px 1px #EAEAEA;
						  border-radius: 5rpx;
						  padding: 10rpx;
						  .custom-textarea-box {
							  width: 100%;
							  word-break: break-all;
						  }
					  }
					  .upload-image-wrap {
						  margin: 60rpx auto;
					  }
				  }
			  }
			}
		}
	}
</style>
